// 默认主题变量
@import "vars";
// ---- 新增变量 -------------------------
// button
$--button-default-hover-background-color: $--color-primary-light-9 !default;
$--button-default-hover-border-color: $--color-primary-light-7 !default;
$--button-default-hover-color: $--color-primary !default;

// checkbox
$--checkbox-disabled-font-color: $--disabled-fill-base !default;
$--checkbox-button-border-color: $--border-color-base !default;
$--checkbox-button-disabled-border-color: $--disabled-fill-base !default;
$--checkbox-button-checked-border-color: $--color-primary !default;

// radio
$--radio-disabled-font-color: $--disabled-fill-base !default;
$--radio-button-border-color: $--border-color-base !default;
$--radio-button-disabled-border-color: $--disabled-fill-base !default;
$--radio-button-checked-border-color: $--color-primary !default;

// input
$--input-append-background-color: $--background-color-base !default;
$--input-append-color: $--color-info !default;
$--input-append-border-color: $--border-color-base !default;

// select
$--select-tag-background-color: '#f0f2f5' !default;
$--select-tag-color: $--color-text-secondary !default;


// ---- 新增变量 end -------------------------

// ElementUI 样式
@import "~element-ui/packages/theme-chalk/src/index.scss";

// ---- fix ElementUI 样式 start ----------------

// button
.el-button {
  &--default {
    &:hover,
    &:focus {
      color: $--button-default-hover-color;
      border-color: $--button-default-hover-border-color;
      background-color: $--button-default-hover-background-color;
    }

  }
}

// checkbox
.el-checkbox {
  &.is-bordered {
    border-color: $--checkbox-button-border-color;
    &.is-checked {
      border-color: $--checkbox-button-checked-border-color;
    }
    &.is-disabled {
      border-color: $--checkbox-button-disabled-border-color;
    }
  }

  &-button__inner {
    border-color: $--radio-button-border-color;
  }

  &.is-disabled {
    span.el-checkbox__label {
      color: $--checkbox-disabled-font-color;
    }
  }
  &__input {
    &.is-checked {
      .el-checkbox__inner {
        &::after {
          border-color: $--checkbox-checked-icon-color;
        }
      }
    }
  }

  &__inner {
    &::after {
      // border-color: $--checkbox-icon-color;
    }
  }
}

.el-checkbox-button.is-disabled {
  span.el-checkbox-button__inner {
    border-color: $--checkbox-button-disabled-border-color;
  }
}

// radio
.el-radio {
  &.is-bordered {
    border-color: $--radio-button-border-color;
    &.is-checked {
      border-color: $--radio-button-checked-border-color;
    }
    &.is-disabled {
      border-color: $--radio-button-disabled-border-color;
    }
  }
  &-button__inner {
    border-color: $--radio-button-border-color;
  }

  &__inner {
    border-color: $--radio-input-border-color;
    &::after {
      background-color: $--radio-icon-color;
    }
  }
  &.is-disabled {
    span.el-radio__label {
      color: $--checkbox-disabled-font-color;
    }
  }
}

.el-radio-button.is-disabled {
  span.el-radio-button__inner {
    border-color: $--radio-button-disabled-border-color;
  }
}

// select
.el-select {
  .el-input.is-disabled {
    .el-input__inner {
      border-color: $--select-disabled-border;
    }
  }
}

// input
.el-input {
  &__inner {
    border-color: $--input-border-color;
  }
}

.el-input-group {
  &__append, &__prepend {
    background-color: $--input-append-background-color;
    color: $--input-append-color;
    border-color: $--input-append-border-color;
  }
}

.el-select {
  .el-tag {
    background-color: $--select-tag-background-color;
    color: $--select-tag-color;
  }
}
